<template>

  <div>
    <el-button :icon="markData && markData.favMark?'el-icon-star-on':'el-icon-star-off'" @click="handelMarkFav">收藏</el-button>
    <el-button :disabled="hideMark" :icon="markData && markData.favNote?'el-icon-document':'el-icon-document-remove'" @click="showNoteDialog">记笔记</el-button>
    <el-button type="danger" icon="el-icon-question" @click="showReport">纠错</el-button>

    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      append-to-body
      title="记笔记"
      width="500px"
      @close="dialogVisible = false"
    >

      <div style="padding-top: 20px">
        <el-form ref="postForm" :model="postForm" :rules="rules" label-width="120px" label-position="top">

          <el-form-item prop="favNote">
            <el-input v-model="postForm.favNote" type="textarea" />
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveFavNote">确 定</el-button>
      </div>

    </el-dialog>

    <qu-report-dialog :qu-id="quId" :visible.sync="reportVisible"/>
  </div>

</template>

<script>

import { markFav, findMark, writeNote } from '@/api/client/repo/book'
import QuReportDialog from '@/views/web/repo/components/QuReportDialog/index.vue'


export default {
  name: 'QuMarkItem',
  components: { QuReportDialog },
  props: {
    repoId: String,
    quId: String,
    hideMark: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      dialogVisible: false,
      markData: {
        favMark: null,
        favNote: null
      },
      postForm: {
        favNote: ''
      },
      rules: {
        favNote: [
          { required: true, message: '笔记内容不能为空！' }
        ]
      },
      // 错误反馈
      reportVisible: false
    }
  },
  watch: {
    quId: {
      handler() {
        this.initValue()
      }
    }
  },

  created() {
    // 查找
    this.initValue()
  },

  methods: {

    // 初始化查找收藏和笔记情况
    initValue() {
      findMark('repo', this.repoId, this.quId).then(res => {
        this.markData = res.data
      })
    },

    // 收藏
    handelMarkFav() {
      // 取消收藏
      const mark = this.markData && this.markData.favMark

      markFav('repo', this.repoId, this.quId, !mark).then(() => {
        this.$message.success('操作成功！')
        this.initValue()
      })
    },

    // 打开记笔记
    showNoteDialog() {
      this.postForm.favNote = this.markData.favNote
      this.dialogVisible = true
    },

    // 记笔记
    saveFavNote() {
      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return
        }
        writeNote('repo', this.repoId, this.quId, this.postForm.favNote).then(() => {
          this.$message.success('操作成功！')
          this.markData.favNote = this.postForm.favNote
          this.dialogVisible = false
          this.$emit('note')
        })
      })
    },

    // 打开记笔记
    showReport() {
      this.reportVisible = true
    }
  }
}
</script>
